<template>
    <div>
        <a-card title="多行文字溢出隐藏：">
            <h3>
                场景：默认文字溢出隐藏，点击显示完整文件名，类似Windows桌面文件效果
            </h3>
            <div id="name" @click="showFullname">我要文字溢出隐藏效果</div>
            <pre v-highlight>
                <code class="css">
    width: 115px;
    font-size: 17px;
    overflow: hidden;
    /* autoprefixer: ignore next */
    -webkit-line-clamp: 4;
    /* autoprefixer: on */
    -webkit-box-orient: vertical;
    display: -webkit-box;
                </code>
            </pre>
            <h3>
                问题：vue下打包，由于 -webkit-line-clamp
                不在css规范之内，打包时会被忽略，导致样式不生效
            </h3>
            <h4>解决办法：autoprefixer注释(此处隐藏一个css警告)</h4>
            <pre v-highlight>
                <code class="css">
  overflow: hidden;
    /* autoprefixer: off */
    -webkit-line-clamp: 4;
    /* autoprefixer: on */
    -webkit-box-orient: vertical;
    display: -webkit-box;
                </code>
            </pre>

            <h4>解决警告：</h4>
            <pre v-highlight>
                <code class="css">
    overflow: hidden;
    /* autoprefixer: ignore next */
    -webkit-line-clamp: 4;
   
                </code>
            </pre>

            <h3>关于typescript操作dom设置webkitLineClamp：</h3>
            <p>
                未知原因可能出现webkitLineClamp属性不存在于CSSStyleDeclaration的error，揣测是由于typescript版本导致
            </p>
            <pre v-highlight>
                <code class="javascript">
            // 正常情况
            const nameDom = document.getElementById('name') as HTMLDivElement;
            nameDom.style.webkitLineClamp = '3';

            // 出现error，as any 处理
            const nameDom = document.getElementById('name') as HTMLDivElement;
            (nameDom.style as any).webkitLineClamp = '1';
   
   
                </code>
            </pre>

            <h3>
                其他解决方案:插件修改webpack配置（太过繁琐，未采用，看项目规模而定，假如大量组件修改则采用此方案）
            </h3>
            <pre v-highlight>
                <code class="javascript">
         // npm安装依赖
         npm i -S optimize-css-assets-webpack-plugin

         // 注释掉webpack.prod.conf.js中下面这段代码代码：
         new OptimizeCSSPlugin({
            cssProcessorOptions: config.build.productionSourceMap
                ? { safe: true, map: { inline: false } }
                : { safe: true }
            })

                </code>
            </pre>
            <a-card-meta
                title="环境"
                description="vuecli3+,typescript"
            ></a-card-meta>
        </a-card>
    </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
@Component
export default class WebkitLineClamp extends Vue {
    private isHide: boolean = false;
    private showFullname() {
        this.isHide = !this.isHide;
        if (this.isHide) {
            const nameDom = document.getElementById('name') as HTMLDivElement;
            nameDom.style.webkitLineClamp = '3';
        } else {
            const nameDom = document.getElementById('name') as HTMLDivElement;
            nameDom.style.webkitLineClamp = '1';
        }
    }
}
</script>
<style scoped>
#name {
    width: 115px;
    font-size: 17px;
    overflow: hidden;
    /* autoprefixer: ignore next */
    -webkit-line-clamp: 1;
    /* autoprefixer: on */
    -webkit-box-orient: vertical;
    display: -webkit-box;

    box-shadow: #42b983 2px 2px 2px 2px;
}
h4 {
    color: #42b983;
}
p {
    color: chocolate;
}
</style>